<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"  style="border: 1px solid #000;background-image: url(/upload/2020/08/25/1.png); background-repeat:no-repeat;"></canvas>
<canvas id="offCanvas" style="display:none" ></canvas>

<script>
    let layer = 0;
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    let offCanvas = document.getElementById("offCanvas");
    let offCtx = offCanvas.getContext('2d');
    let img = new Image();
    img.src = "/upload/2020/08/25/1.png";
    img.onload = function () {
        img.width = img.width * 0.8;
        img.height = img.height * 0.8;
        canvas.width = img.width;
        canvas.height = img.height;
        offCanvas.width = img.width;
        offCanvas.height = img.height;
        offCtx.drawImage(img,0,0,img.width,img.height);
    }

    CanvasExt = {
        drawRect:function(canvasId,penColor,strokeWidth){
            let that=this;
            that.penColor=penColor;
            that.penWidth=strokeWidth;

            let canvas = document.getElementById(canvasId);
            //canvas 的矩形框
            let canvasRect = canvas.getBoundingClientRect();
            //矩形框的左上角坐标
            let canvasLeft=canvasRect.left;
            let canvasTop=canvasRect.top;

            let layerIndex=layer;
            let layerName="layer";
            let x=0;
            let y=0;

            //鼠标点击按下事件，画图准备
            canvas.onmousedown=function(e){
                //设置画笔颜色和宽度
                let color=that.penColor;
                let penWidth=that.penWidth;
                layerIndex++;
                layer++;
                layerName+=layerIndex;
                x = e.clientX-canvasLeft;
                y = e.clientY-canvasTop;

                $("#"+canvasId).addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name:layerName,
                    fromCenter: false,
                    x: x, y: y,
                    width: 1,
                    height: 1
                });

                $("#"+canvasId).drawLayers();
                $("#"+canvasId).saveCanvas();
                //鼠标移动事件，画图
                canvas.onmousemove=function(e){
                    width = e.clientX-canvasLeft-x;
                    height = e.clientY-canvasTop-y;
                    $("#"+canvasId).removeLayer(layerName);
                    $("#"+canvasId).addLayer({
                        type: 'rectangle',
                        strokeStyle: color,
                        strokeWidth: penWidth,
                        name:layerName,
                        fromCenter: false,
                        x: x, y: y,
                        width: width,
                        height: height
                    });

                    $("#"+canvasId).drawLayers();
                }
            };

            canvas.onmouseup=function(e){

                let color=that.penColor;
                let penWidth=that.penWidth;

                canvas.onmousemove=null;

                width = e.clientX-canvasLeft-x;
                height = e.clientY-canvasTop-y;

                $("#"+canvasId).removeLayer(layerName);

                $("#"+canvasId).addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name:layerName,
                    fromCenter: false,
                    x: x, y: y,
                    width: width,
                    height: height
                });

                $("#"+canvasId).drawLayers();
                $("#"+canvasId).saveCanvas();
            }
        }
    };

    drawPen();

    function drawPen(){
        let color = document.getElementById("color").valueOf();
        let width = 1;
        CanvasExt.drawRect("canvas",color,width);
    }



    function compositeGraph(){
        offCtx.drawImage(canvas,0,0);
        return offCanvas.toDataURL('image/jpeg');
    }

    function doSave(){
        // 获取Canvas的编码。
        let base64 = compositeGraph();
        let pic = base64.replace("data:image/jpeg;base64,","");

    }




</script>
</body>
</html>